语义化的矢量图形，通过使用图形对基础操作功能进行隐喻呈现，给予用户正确、友好且清晰的操作引导。
属性
属性 | 类型 | 必填 | 默认值 | 说明 |
type | string | 是 | "" | Icon 图标的类型 |
size | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 否 | "medium" | Icon 的大小，x-small（16）、small（32）、medium（48）、large（64）、x-large（128） |
color | string | 否 | - | Icon 的颜色，即 CSS 中 color 属性的值。 |
fontSize | string | 否 | - | Icon 的大小 |
className | string | 否 | - | 类名 |
事件
事件名 | 说明 | 类型 |
onTap | 点击图标，触发此回调 |
|
样式类
类名 | 说明 |
amd-icon | 整体样式 |
代码示例
基本使用
index.axml 的代码示例如下：
<view class="demo">
<search-bar placeholder="搜索" onInput="handleSearchChange" borderColor="#1677ff" />
<view class="sum" a:if="{{!searchValue}}">
目前共有
<text>{{iconTypes.length}}</text>个图标类型
</view>
<view class="list-title">
线框风格
</view>
<view class="icon-list">
<view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Outline') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
<view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
<am-icon type="{{item}}" color="#1677ff" size="small" />
<text class="icon-desc">{{item}}</text>
</view>
</view>
</view>
<view class="list-title">
实底风格
</view>
<view class="icon-list">
<view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Fill') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
<view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
<am-icon type="{{item}}" color="#1677ff" size="small" onTap="handleClickIcon" data-info="{{item}}" />
<text class="icon-desc">{{item}}</text>
</view>
</view>
</view>
</view>index.js 的代码示例如下：
Page({
data: {
iconTypes: [
'MinusOutline',
'AlipayCircleFill',
'CheckCircleFill',
'FireFill',
'FaceRecognitionOutline',
'StarFill',
'EyeInvisibleFill',
'SmileFill',
'FrownFill',
'BankcardOutline',
'HeartOutline',
'EyeFill',
'HeartFill',
'DownFill',
'CloseCircleFill',
'VideoOutline',
'CouponOutline',
'ReceiptOutline',
'AntOutline',
'UserCircleOutline',
'PayCircleOutline',
'BillOutline',
'PlayOutline',
'PayOutline',
'MoreOutline',
'ShrinkOutline',
'ArrowsAltOutline',
'StarOutline',
'CheckOutline',
'DeleteOutline',
'LinkOutline',
'InformationCircleOutline',
'GlobalOutline',
'InformationCircleFill',
'ExclamationCircleFill',
'CheckCircleOutline',
'CloseCircleOutline',
'SetOutline',
'QuestionCircleFill',
'QuestionCircleOutline',
'UpCircleOutline',
'FrownOutline',
'DownCircleOutline',
'ExclamationCircleOutline',
'MinusCircleOutline',
'RedoOutline',
'UndoOutline',
'EyeInvisibleOutline',
'ForbidFill',
'PicturesOutline',
'PictureOutline',
'PictureWrongOutline',
'EyeOutline',
'AddCircleOutline',
'ClockCircleFill',
'ClockCircleOutline',
'BellMuteOutline',
'KeyOutline',
'BellOutline',
'SearchOutline',
'CollectMoneyOutline',
'UnorderedListOutline',
'AppstoreOutline',
'ExclamationTriangleOutline',
'AddOutline',
'ScanningOutline',
'ScanCodeOutline',
'ExclamationOutline',
'CloseOutline',
'ScanningFaceOutline',
'LeftOutline',
'DownOutline',
'UpOutline',
'RightOutline',
'KoubeiOutline',
'KoubeiFill',
'AAOutline',
'ArrowDownCircleOutline',
'MovieOutline',
'CompassOutline',
'LoopOutline',
'TextOutline',
'TagOutline',
'FlagOutline',
'EnvironmentOutline',
'CalendarOutline',
'LocationFill',
'PhoneFill',
'PhonebookOutline',
'SmileOutline',
'UserAddOutline',
'FileWrongOutline',
'SoundMuteFill',
'SoundMuteOutline',
'LockOutline',
'UnlockOutline',
'EditSOutline',
'UploadOutline',
'SoundOutline',
'DownlandOutline',
'SendOutline',
'FillinOutline',
'AudioMutedOutline',
'AudioOutline',
'UserOutline',
'UserContactOutline',
'TeamOutline',
'UserSetOutline',
'FileOutline',
'MailOutline',
'TruckOutline',
'MailOpenOutline',
'ChatCheckOutline',
'ChatAddOutline',
'ChatWrongOutline',
'PhonebookFill',
'AddressBookFill',
'CalculatorOutline',
'PieOutline',
'HandPayCircleOutline',
'GiftOutline',
'TransportQRcodeOutline',
'FolderOutline',
'AlipaySquareFill',
'TravelOutline',
'AppOutline',
'HistogramOutline',
'MailFill',
'CameraOutline',
'EditFill',
'SystemQRcodeOutline',
'LockFill',
'AudioFill',
'TeamFill',
'FilterOutline',
'EditSFill',
'LikeOutline',
'TextDeletionOutline',
'StopOutline',
'FingerdownOutline',
'MessageFill',
'LocationOutline',
'ContentOutline',
'ExclamationShieldFill',
'ReceivePaymentOutline',
'ExclamationShieldOutline',
'AddSquareOutline',
'CloseShieldOutline',
'CheckShieldOutline',
'CheckShieldFill',
'ShopbagOutline',
'MessageOutline',
],
searchValue: '',
},
handleSearchChange(value) {
this.setData({ searchValue: value });
},
handleClickIcon(e) {
const { info } = e.target.dataset;
top.postMessage({ iconType: info }, '*');
my.showToast({
content: `${info} 已复制到剪贴板`,
});
},
});index.acss 的代码示例如下：
.demo {
background: #fff;
}
.sum {
padding: 24rpx;
}
.sum>text {
color: red;
}
.list-title {
color: red;
font-size: 32rpx;
font-weight: bold;
padding: 24rpx;
}
.icon-list {
display: flex;
flex-wrap: wrap;
padding: 24rpx;
background: #fff;
}
.icon-item {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
flex: 0 33.33333%;
height: 170rpx;
padding: 16rpx;
border: 1rpx solid #eee;
box-sizing: border-box;
}
.icon-desc {
flex: 0 100%;
margin-top: 24rpx;
font-size: 24rpx;
text-align: center;
word-wrap: break-word;
word-break: break-all;
}
.icon-item-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}index.json 的代码示例如下：
{
"defaultTitle": "Icon",
"usingComponents": {
"am-icon": "antd-mini/es/Icon/index",
"search-bar": "antd-mini/es/SearchBar/index"
}
}
反馈
- 本页导读 （0）